extends layout

block content

  main
    header.hero
      div.content
        h1 Picnic CSS
        p.slogan Lightweight and beautiful library
        pre.bower bower install picnic

        p.links
          a.cdn(href="http://www.jsdelivr.com/#!picnicss" target="_blank") CDN
          span  |
          a.github(href="https://raw.githubusercontent.com/picnicss/picnic/master/picnic.min.css" target="_blank") Download
          span  |
          a.github(href="https://github.com/picnicss/picnic" target="_blank") GitHub

      a.keepgoing(href="#content" aria-hidden="true") ▼


    div.visual.flex.one.two-800#content
      div.content
        h2 Default HTML beauty
        p The native HTML elements get a boost so you don't need to write presentation classes mixed with your HTML.
        p Picnic is completely modular so you can easily modify and test each part:
        a.button.icon-file-code(href="/documentation") Documentation
      div.card
        section
          button Normal
          = ' '
          button.success Success
          = ' '
          button.warning Warning
          = ' '
          button.error Error
        section
          input(type="email" placeholder="Email" aria-label="Email")
        section
          div.flex.three.gallery
            div
              article.tooltip-bottom(data-tooltip="Click me to upload a new image")
                label.dropimage
                  input(type="file")
            div
              article.tooltip-bottom(data-tooltip="Click me to upload a new image")
                label.dropimage(style="background-image: url(web/img/optimised.svg)")
                  input(type="file")
            div
              article.tooltip-bottom(data-tooltip="Click me to upload a new image")
                label.dropimage(style="background-image: url(web/img/optimised.svg)")
                  input(type="file")


    div.visual.flex.one.two-800
      div.content
        h2 Made for the hackers
        p Install with bower and you will be able to integrate Picnic into any project and make it work for you.
        p Picnic is written in SCSS with <a href="/documentation#variables">many variables</a> and <a href="/documentation#placeholders"><em>classes</em> (placeholders)</a> to make it easy to extend.
        a.button.icon-g(href="https://github.com/picnicss/picnic" target="_blank") GitHub

      :markdown
        ```css
        $picnic-primary: #faa;

        @import 'bower/picnic/src/picnic';

        .call-to-action {
          @extends %button;
        }
        ```

    div.visual.flex.one.two-800
      div.content
        h2 It's alive!
        p Get the best experience for your users with many subtle and carefully crafted CSS transitions.
        p Fun fact: there's not a single line of JavaScript for controlling the multi-step form on the right ⇒
        a.button.icon-help-circled(href="/tests") Tests
      div
        div.tabs.three(style="text-align: center;")
          input#tabC-1(type='radio' name='tabgroupC' checked aria-hidden="true")
          label.pseudo.button.toggle(for="tabC-1") 1
          span  /
          input#tabC-2(type='radio' name='tabgroupC' aria-hidden="true")
          label.pseudo.button.toggle(for="tabC-2") 2
          span  /
          input#tabC-3(type='radio' name='tabgroupC' aria-hidden="true")
          label.pseudo.button.toggle(for="tabC-3") 3
          div.row
            div.card
              header
                h3 Registration form example
              section Obviously agree with the
                a(href="#")
                  strong(data-tooltip="Clicking me is futile") terms and conditions
              section
                label
                  input(type="checkbox" name="check" aria-hidden="true")
                  span.checkable I agree with them!

              footer
                label.button(for="tabC-2") Agree

            div.card
              header
                h3 Our relationship
              section
                select
                  option How did you find us?
                  option(value="hackernews") Hacker News
                  option(value="friends") Friends
                  option(value="google") Google
                  option(value="keysmash") Keyboard smashing
              section
                label
                  input(type="radio" name="like" value="a lot" aria-hidden="true")
                  span.checkable I love Picnic!
                label
                  input(type="radio" name="like" value="nothing" aria-hidden="true")
                  span.checkable I've seen better...
              footer
                label.button(for="tabC-3") Next
                label.button.dangerous(for="tabC-1") Back

            div.card
              header
                h3 Subscribe?
              section
                input(type="text" placeholder="Full Name" aria-label="Full Name")
              section
                input(type="email" placeholder="Email" aria-label="Email")
              footer
                button.success Finish!
                label.button.dangerous(for="tabC-2") Back


    div.visual.flex.one.two-800
      div.content
        h2 For your mobile
        p Picnic's mission is to be <strong>under 10kb</strong> of compressed CSS for a <a href="https://www.youtube.com/watch?v=GDpmVUEjagg" target="_blank">better and faster</a> mobile load. Check the network usage of this page (F12).
      div
        div.flex.demo
          div
            div
        div.flex.demo
          div
            div
          div
            div
        div.flex.demo
          div
            div
          div
            div
          div
            div
        div.flex.demo
          div
            div
          div
            div
          div
            div
          div
            div
        div.flex.demo
          div
            div
          div
            div
          div
            div
          div
            div
          div
            div


    //- div.visual
    //-   div.content
    //-     h2 Showcase
    //-     div.flex.one.two-800
    //-       div
    //-         article.browser(data-title="Makers UPV")
    //-           iframe(data-src="http://www.makersupv.com/")
    //-         a.button(href="http://makersupv.com/" target="_blank") Makers UPV
    //-       div
    //-         article.browser(data-title="Umbrella JS")
    //-           iframe(data-src="http://umbrellajs.com/")
    //-         a.button(href="http://umbrellajs.com" target="_blank") Umbrella JS


    div.visual.flex.one.two-800
      div.content
        h2 Open Source
        p If you love something set it free. This license allows you to use Picnic in a broad variety of projects.
        a.button(href="https://github.com/picnicss/picnic/blob/master/LICENSE" target="_blank") MIT License
      div.content
        h2 Special thanks to
        ul
          li
            strong
              a(href="https://github.com/picnicss/picnic/graphs/contributors") Contributors
            span : for helping Picnic improve
          li
            strong
              a(href="http://necolas.github.io/normalize.css/" target="_blank") Normalize.css
            span : A modern alternative to resets
          li
            strong
              a(href="http://clrs.cc/" target="_blank") Clrs.cc
            span : A nicer color palette for the web.
          li
            strong= 'With love, '
              a(href="http://francisco.io/") Francisco Presencia

    comment-box.visual.border(hackernews="8315616" add="hackernews" limit="50")

  script.

    // Transparent nav handler
    var nav = document.querySelector('nav');
    function navScroll(){
      var className = 'transparent';
      var top = window.scrollY ? window.scrollY : document.documentElement.scrollTop;
      if (top > 0) {
        nav.classList.remove(className);
        [].forEach.call(document.querySelectorAll('[data-src]'), function(iframe){
          iframe.setAttribute('src', iframe.getAttribute('data-src'));
          iframe.removeAttribute('data-src');
        });
      } else {
        nav.classList.add('transparent');
        nav.classList.add(className);
      }
    };
    window.onscroll = navScroll;
    navScroll();
    setTimeout(function(){ nav.classList.remove('loading'); }, 10);
